<template>
    <div id="secondnavbar">
        <div class="container">
            <div class="list" v-for="(item, index) in navlist" :key="index">
                <div class="left">
                    {{ item.name }}
                </div>
                <div class="right">
                    <div class="item" v-for="nav in item.children" :key="nav.id" @click="RouteTo(nav)">
                        {{ nav.name }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                navlist: [],
            }
        },
        mounted () {
            this.getNavList();
        },
        methods: {
            async getNavList() {
                let res = await this.$axios.post("/port/index/ernav", { key: this.$key })
                // console.log(res);
                let code = res.data.code
                if (code == 200) {
                    this.navlist = res.data.data
                }
            },
            RouteTo( item ) {
                console.log(item);
                this.$router.push(`/thirds/${item.fid}/${item.id}`)
            }
        },
    }
</script>

<style lang="scss" scoped>
 #secondnavbar {
     width: 100%;
     .container {
         width: 1200px;
         margin: 10px auto;
         display: flex;
         
         .list {
             width: 300px;
             padding: 10px;
             box-sizing: border-box;
             display: flex;
             align-items: center;
             background-color: #fff;
             .left {
                 width: 45px;
             }
             .right {
                 flex: 1;
                 display: flex;
                 flex-wrap: wrap;
                 .item {
                     font-size: 12px;
                     margin: 3px;
                     padding: 2px;
                     box-sizing: border-box;
                     border-bottom: 1px solid #f5f5f5;
                     cursor: pointer;
                     color: #aaa;
                     &:hover {
                         color: #007eff;
                         border-bottom: 1px solid #007eff;
                         box-sizing: border-box;
                     }
                 }
             }
         }
     }
 }
</style>